<template>
  <view class="bg-1 more-filter">
    <view class="flex-1" style="overflow: hidden;">
      <scroll-view scrollY="true" class="h">
        <view class="p-l24 p-r4">
          <view class="p-v30 tag-section">
            <view class="tag-title">
              <text class="text-700-130">更新日期</text>
            </view>
            <view class="tag-list">
              <view v-for="(tag, index) in updateDateList" :key="index" class="p-v20 m-t20 m-r20 flex-c tag"
                :class="[{ active: tag === selected.updateDate }]" @click="selectUpdateDate(tag)">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>

          <view class="p-v30 tag-section">
            <view class="tag-title">
              <text class="text-700-130">工作经验</text>
            </view>
            <view class="tag-list">
              <view v-for="(tag, index) in workExpList" :key="index" class="p-v20 m-t20 m-r20 flex-c tag"
                :class="[{ active: tag === selected.workExp }]" @click="selectWorkExp(tag)">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>

          <view class="p-v30 tag-section">
            <view class="tag-title">
              <text class="text-700-130">最低学历</text>
            </view>
            <view class="tag-list">
              <view v-for="(tag, index) in eduList" :key="index" class="p-v20 m-t20 m-r20 flex-c tag"
                :class="[{ active: tag === selected.edu }]" @click="selectEdu(tag)">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="bottom p-h24 flex-c">
      <view class="flex-c r-40 reset-btn" @click="handleResetData">
        <text class="text-700-528">清空条件</text>
      </view>
      <view class="flex-c flex-1 r-40 m-l24 confirm-btn" @click="handleChange">
        <text class="text-700-228">确定</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineEmits, reactive, ref } from 'vue'
const emit = defineEmits(['change'])
const updateDateList = ref(['不限时间', '3天内', '7天内', '15天内', '30天内'])
const workExpList = ref(['在校生', '应届生', '一年以内', '1-3年', '3-5年', '5-10年', '10年以上'])
const eduList = ref(['不限学历', '初中', '高中', '大专', '本科', '其他'])

const selected = reactive({
  updateDate: '',
  workExp: '',
  edu: '',
})
function handleResetData() {
  selected.updateDate = ''
  selected.workExp = ''
  selected.edu = ''
}
function handleChange() {
  const valus = Object.values(selected).filter(x => x)
  emit('change', valus.join())
}
const selectUpdateDate = (val: string) => {
  if (selected.updateDate === val) return

  selected.updateDate = val
}

const selectWorkExp = (val: string) => {
  if (selected.workExp === val) return

  selected.workExp = val
}

const selectEdu = (val: string) => {
  if (selected.edu === val) return

  selected.edu = val
}
</script>

<style lang="scss" scoped>
.more-filter {
  height: 790rpx;
  display: flex;
  flex-direction: column;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  height: 72rpx;
  padding: 0 20rpx;
  border-radius: 4rpx;
  font-size: 28rpx;
  color: $text-color-1;
  background-color: $bg-color-6;
  border: 1px solid transparent;

  &.active {
    font-weight: bold;
    color: $text-color-5;
    background-color: $bg-color-4;
    border-color: $border-color-1;
  }
}

.tag-section+.tag-section {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 20rpx;
    top: 0;
    height: 1px;
    background-color: $border-color-2;
    transform-origin: top;
    transform: scaleY(0.5);
  }
}

.bottom {
  height: 120rpx;
}

.reset-btn,
.confirm-btn {
  height: 80rpx;
}

.reset-btn {
  width: 240rpx;
  background-color: $bg-color-4;
}

.confirm-btn {
  background-color: $bg-color-2;
}
</style>
